<template>
  <div class="min-h-screen bg-gray-50 sm:pt-16 pt-12">
    <!-- Hero Section -->
    <div
      class="relative bg-[#E30314] py-16 sm:py-24">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h1 class="text-4xl sm:text-6xl font-bold text-white mb-4">
            {{ heroData.title }}
          </h1>
          <p class="text-xl sm:text-2xl text-blue-100 max-w-3xl mx-auto">
            {{ heroData.subtitle }}
          </p>
        </div>
      </div>
    </div>

    <!-- 加盟政策内容 -->
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
      <!-- 政策概览 -->
      <div class="mb-16">
        <h2
          class="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ overviewData.title }}
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
          <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
            <div class="flex items-center mb-4">
              <div
                class="w-12 h-12 bg-[#E30314] rounded-full flex items-center justify-center mr-4">
                <span class="text-white font-bold text-lg">1</span>
              </div>
              <h3 class="text-xl sm:text-2xl font-semibold text-gray-900">
                {{ overviewData.leftColumn.title }}
              </h3>
            </div>
            <div class="space-y-4">
              <div
                v-for="(item, index) in overviewData.leftColumn.items"
                :key="index"
                class="flex items-start space-x-3">
                <div
                  class="w-2 h-2 bg-[#E30314] rounded-full mt-2 flex-shrink-0"></div>
                <p class="text-gray-700">{{ item }}</p>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
            <div class="flex items-center mb-4">
              <div
                class="w-12 h-12 bg-[#E30314] rounded-full flex items-center justify-center mr-4">
                <span class="text-white font-bold text-lg">2</span>
              </div>
              <h3 class="text-xl sm:text-2xl font-semibold text-gray-900">
                {{ overviewData.rightColumn.title }}
              </h3>
            </div>
            <div class="space-y-4">
              <div
                v-for="(item, index) in overviewData.rightColumn.items"
                :key="index"
                class="flex items-start space-x-3">
                <div
                  class="w-2 h-2 bg-[#E30314] rounded-full mt-2 flex-shrink-0"></div>
                <p class="text-gray-700">{{ item }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加盟类型 -->
      <div class="mb-16">
        <h2
          class="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ franchiseTypesData.title }}
        </h2>
        <div
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          <FranchisePolicyCard
            v-for="(type, index) in franchiseTypesData.types"
            :key="index"
            :type="type"
            :index="index" />
        </div>
      </div>

      <!-- 开放区域 -->
      <div class="mb-16">
        <h2
          class="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ openAreasData.title }}
        </h2>
        <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div
              v-for="(area, index) in openAreasData.areas"
              :key="index"
              class="text-center p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
              <div
                class="w-16 h-16 bg-[#fdf0f1] rounded-full flex items-center justify-center mx-auto mb-3">
                <span class="text-[#E30314] font-bold text-lg">{{
                  area.number
                }}</span>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">{{ area.name }}</h4>
              <p class="text-sm text-gray-600">{{ area.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 申请流程 -->
      <div class="mb-16">
        <h2
          class="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-12">
          {{ applicationProcessData.title }}
        </h2>
        <div class="relative">
          <div
            class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-blue-200"></div>
          <div class="space-y-8">
            <div
              v-for="(step, index) in applicationProcessData.steps"
              :key="index"
              class="relative flex flex-col lg:flex-row items-center">
              <div class="lg:w-1/2 mb-4 lg:mb-0 lg:pr-10">
                <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
                  <div class="flex items-center mb-4">
                    <div
                      class="w-12 h-12 bg-[#E30314] rounded-full flex items-center justify-center mr-4">
                      <span class="text-white font-bold">{{ index + 1 }}</span>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900">
                      {{ step.title }}
                    </h3>
                  </div>
                  <p class="text-gray-600">{{ step.description }}</p>
                </div>
              </div>
              <div class="lg:w-1/2 lg:pl-8">
                <div class="bg-gray-50 rounded-lg p-6">
                  <h4 class="font-semibold text-gray-900 mb-3">
                    {{ step.subtitle }}
                  </h4>
                  <ul class="space-y-2">
                    <li
                      v-for="(item, idx) in step.items"
                      :key="idx"
                      class="flex items-start space-x-2">
                      <svg
                        class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0"
                        fill="currentColor"
                        viewBox="0 0 20 20">
                        <path
                          fill-rule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clip-rule="evenodd"></path>
                      </svg>
                      <span class="text-sm text-gray-600">{{ item }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div
        class="bg-[#E30314] rounded-lg shadow-lg p-8 sm:p-12 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">
          {{ contactData.title }}
        </h2>
        <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
          {{ contactData.description }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <button
            class="bg-white text-[#E30314] px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
            {{ contactData.primaryButton }}
          </button>
          <button
            class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors">
            {{ contactData.secondaryButton }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { franchisePolicyConfig } from "@/config/franchisePolicy.js";
import FranchisePolicyCard from "@/components/FranchisePolicyCard.vue";

// 使用配置文件中的数据
const heroData = ref(franchisePolicyConfig.hero);
const overviewData = ref(franchisePolicyConfig.overview);
const franchiseTypesData = ref(franchisePolicyConfig.franchiseTypes);
const openAreasData = ref(franchisePolicyConfig.openAreas);
const applicationProcessData = ref(franchisePolicyConfig.applicationProcess);
const contactData = ref(franchisePolicyConfig.contact);
</script>

<style scoped>
/* 响应式设计优化 */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 动画效果 */
.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 渐变背景 */
.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
